<div class="custom_input">
  <svg
    viewBox="0 0 16 16"
    class="svg_icon bi-search"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path
      d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"
    ></path>
  </svg>
  <input placeholder="Placeholder Text" type="text" class="input" />
</div>

<style>
/* From Uiverse.io by escannord  - Tags: input, light, search */
.input {
  max-width: 190px;
}

.custom_input {
  display: flex;
  align-items: center;
  position: relative;
  max-width: 100%;
}

.input {
  font-size: 18px;
  padding: 5px 10px;
  width: 100%;
  padding-left: 35px;
  outline: none;
  background: #ffffff;
  color: #000000;
  border: 1px solid #c4d1eb;
  border-radius: 5px;
  box-shadow: 3px 3px 2px 0px #e2e2e2;
  transition: 0.3s ease;
}

.input:focus {
  background: #f2f2f2;
  border: 1px solid #5a7ec7;
  border-radius: 10px;
}

.input::placeholder {
  color: #dddddd;
}

.svg_icon {
  position: absolute;
  left: 10px;
  fill: #4660dc;
  width: 18px;
  height: 18px;
}

</style>
    